﻿<template>
    <el-container>
        <el-header>
            <div class="left-panel">
    
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-form-item label="仓库名称" label-width="100px">
                        <sc-warehouse-select
                            ref="orgselect"
                            :props="warehouseProps"
                            :selectKeyValue="'warehouseId'"
                            v-model="queryList.warehouses"
                            @fatherMethod="warehouseSelectProcess"
                        ></sc-warehouse-select>
                    </el-form-item>
                    <el-form-item label="物料编码" label-width="100px">
                        <el-input
                            placeholder="---请输入编码---"
                            v-model="queryList.materialCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="物料名称" label-width="100px">
                        <el-input
                            placeholder="---请输入名称---"
                            v-model="queryList.materialName"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="物料规格" label-width="100px">
                        <el-input
                            placeholder="---请输入名称---"
                            v-model="queryList.materialSpecs"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="物料分类" label-width="100px">
                        <el-tree-select
                            placeholder="---请选择物料分类---"
                            v-model="queryList.materialTypeIds"
                            :props="{ label: 'label', value:'value',children: 'children' }"
                            :data="materialTypeTree" 
                            collapse-tags
                            collapse-tags-tooltip
                            multiple
                            :render-after-expand="false"
                            show-checkbox
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="库存时间" label-width="100px">
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.stockOperDates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>

        <el-main class="nopadding">
            <scTable
                ref="mytable"
                :queryType="'warehouse-stock-flow/daily-stock-pages'"
                :data="listData"
                :queryList="queryList"
                :column="columnList"
                :orderList="OrderList"
                :sort-orders="['ascending', 'descending']"
                @selection-change="selectionChange"
                row-key="warehouseId"
                key="warehouseId"
                stripe
                show-summary
                remoteSummary
            >
                <!-- <el-table-column type="selection" width="50"></el-table-column> -->
                <template #date="{row}">{{row.date?.slice(0,10)}}</template>
            </scTable>
        </el-main>
    </el-container>
</template>

<script>
import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
import config from "@/config";
export default {
    name: "warehouseStock",
    components: {
        publicjs,
    },
    data() {
        return {
            dialogSave: false,
            dialogStartStock: false,
            showCondition: false,
            selectionRows: [],
            pkList: ["warehouseId"],
            columnList: [
                {
                    prop: "date",
                    label: "时间",
                    width: "110",
                    sortable: true,
                },
                {
                    prop: "warehouseName",
                    label: "仓库名称",
                    width: "130",
                    sortable: true,
                },
                {
                    prop: "materialCode",
                    label: "物料编码",
                    width: "110",
                    sortable: true,
                },
                {
                    prop: "materialName",
                    label: "物料名称",
                    width: "150",
                    sortable: true,
                },
                {
                    prop: "goodCode",
                    label: "点单商品编码",
                    width: "140",
                    sortable: true,
                },
                {
                    prop: "goodName",
                    label: "点单商品名称",
                    width: "140",
                    sortable: true,
                },
                {
                    prop: "materialTypeName",
                    label: "物料分类",
                    width: "130",
                    sortable: true,
                },              
                {
                    prop: "materialSpecs",
                    label: "物料规格",
                    width: "140",
                    sortable: true,
                },
                {
                    prop: "unitName",
                    label: "物料单位",
                    width: "120",
                    sortable: true,
                },
                {
                    prop: "minStockQty",
                    label: "期初库存",
                    width: "120",
                    sortable: true,
                },
                {
                    prop: "maxStockQty",
                    label: "期末库存",
                    width: "120",
                    sortable: true,
                },
                {
                    prop: "minAmount",
                    label: "期初库存金额",
                    width: "135",
                    sortable: true,
                },
                {
                    prop: "maxAmount",
                    label: "期末库存金额",
                    width: "135",
                    sortable: true,
                },
                {
                    prop: "inStockQty",
                    label: "入库数量",
                    width: "120",
                    sortable: true,
                },
                {
                    prop: "outStockQty",
                    label: "出库数量",
                    width: "120",
                    sortable: true,
                },
                {
                    prop: "inStockPrice",
                    label: "入库单价",
                    width: "120",
                    sortable: true,
                },
                {
                    prop: "outStockPrice",
                    label: "出库单价",
                    width: "120",
                    sortable: true,
                },
                {
                    prop: "inAmount",
                    label: "入库金额",
                    width: "120",
                    sortable: true,
                },
                {
                    prop: "outAmount",
                    label: "出库金额",
                    width: "120",
                    sortable: true,
                },

            ],
            OrderList: { Date: "Desc" },
            queryList: {
                warehouseCode: "",
                warehouseName: "",
                status: "",
            },
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            warehouseProps: {
                label: "warehouseName",
                value: "warehouseId",
            },
            orgCodeList: "",
            orgNameList: "",
            addState: true, //可以增加
            editState: true, //可以修改
            editBatchState: true, //可以批量修改
            deleteState: true, //可以删除
            optionsUnit: [],
            materialTypeTree:[],
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
        };
    },
    methods: {

        //仓库
        async warehouseSelectProcess(rowData) {
            this.queryList.warehouses = [];
            this.queryList.warehouseIds = [];
            if (rowData && rowData.length > 0) {
                rowData.map((p, index) => {
                    if (p) {
                        this.queryList.warehouses = [
                            ...this.queryList.warehouses,
                            {
                                warehouseId: p.warehouseId,
                                warehouseName: p.warehouseName,
                            },
                        ];
                        this.queryList.warehouseIds = [
                            ...this.queryList.warehouseIds,
                            p.warehouseId,
                        ];
                    }
                });
            }
            await this.opBindData();
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection;
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        resetSearch() {
            this.queryList = {};
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "material-type/tree",
                    { status: 1 }
                );
                if (returnValue.status == 200) {
                    this.materialTypeTree = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/dic-options",
                    { ParentBaseDictionaryCodes: ["001", "002"] }
                );
                if (returnValue.status == 200) {
                    this.optionsBrand = returnValue.response.find(
                        (p) => p.code == "001"
                    ).optionsDetails;
                    this.optionsUnit = returnValue.response.find(
                        (p) => p.code == "002"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
    },
    async mounted() {
        await this.initOptions();
        await this.opBindData();
    },
};
</script>
